import './PersonAttendanceList.scss'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'

import { AnnularTemplate } from './AssetsCharts'

import { project } from '../../../../Common/Data'
import { FrontModalBox } from '../Modal'

const { imageUrl } = project[window.location.hostname]

const colorA01 = ['rgba(98, 212, 230, 1)', 'rgba(237, 132, 75, 1)', 'rgba(153, 170, 255, 1)']
const A01List = [
    {
        uuid: 1,
        label: '在册人员',
        img: 'PerA01.png',
        value1: '出勤数',
        value2: '未出勤',
        click: '28c8520c-dd1d-49b8-a320-0443369bddf6',
    },
    {
        uuid: 2,
        label: '临时工',
        img: 'PerA02.png',
        value1: '出勤数',
        value2: '未出勤',
        click: '2f39b286-14e5-4164-ab91-5c953df62067',
    },
    {
        uuid: 3,
        label: '劳务人员',
        img: 'PerA03.png',
        value1: '出勤数',
        value2: '未出勤',
        click: '2163698c-7cc2-46fd-8b26-791b2bae5295',
    },
]

export const PersonAttendanceListA01 = ({ url }) => {
    const [Data, setData] = useState([
        { 出勤数: 0, 未出勤: 0 },
        { 出勤数: 0, 未出勤: 0 },
        { 出勤数: 0, 未出勤: 0 },
    ])
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({ url })
    })

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="PersonAttendanceListA01">
            {A01List.map(({ uuid, label, img, value1, value2, click }, index) => (
                <div key={uuid}>
                    <AnnularTemplate
                        size={{ width: 188, height: 188 }}
                        data={[
                            { type: '出勤数', value: Data[index]['出勤数'] },
                            { type: '未出勤', value: Data[index]['未出勤'] },
                        ]}
                        color={[colorA01[index], 'rgba(255, 214, 21, 1)']}
                        title={label}
                    />
                    <div
                        className="List"
                        onClick={() => {
                            setOptionsCall({
                                type: 'TableList',
                                data: {
                                    type: 'NongKenSecondaryPersonnel',
                                    title: '考勤详情',
                                    uuid: click,
                                },
                            })
                        }}
                    >
                        <div>
                            <img src={imageUrl + img} alt="" />
                            <div>{label}</div>
                        </div>
                        <div style={{ '--color1': colorA01[index], '--color2': 'rgba(255, 214, 21, 1)' }}>
                            <div>
                                <div />
                                <div>出勤数</div>
                                <div>{Data[index][value1]}人</div>
                            </div>
                            <div>
                                <div />
                                <div>未出勤</div>
                                <div>{Data[index][value2]}人</div>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
